<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>警情热力图</title>
    <link rel="stylesheet" href="../../../css/main.css">
    <script src="../../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../mapData/js/echarts/echarts.js"></script>
    <script src="../../../mapData/js/map/china.js"></script>
</head>
<body>
<div id="heatMap" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    /*
     * echarts 封装调用
     *
     * 该类主要包括echarts option对象属性的读取
     * 业务数据获取
     * 地图加载
     * loadHeatMapBusinessData()
     * loadHeatMapMap()
     */
    /*$(function()
    {
        // 初始echars类
        var echartsClass = new EchartsClass(function();
        {
            // 业务数据请求url
            var url = "";
            // 构造业务查询条件
            var queryBo = new Object();
            queryBo.startDate = "";
            //此处自行构建。。。。。

            // 构造mapOption对象
            var mapObj = Object();
            mapObj.url = ""; // 地图geo数据url
            mapObj.id = ""; //  地图id
            mapObj.text = "警情散点图" // 设置地标题
            mapObj.zoom = ""; // 地图缩放等级
            mapObj.center = []; // 地图中心点
            mapObj.visualMap = ""; // 数据值域
            mapObj.x = ""; // 图例x轴位置 左、中、右英文
            mapObj.y = ""; // 图例y轴位置 上、中、下英文

            echartsClass.loadScatterMapBusinessData(url,queryBo,mapObj);
        });
    });*/


    var mapOption;// 将读取的mapOption设置为全局变量，避免在使用该对象的时候重复读取。

    var data = [{name:"大罗",value:[113.169518,36.169646,10]},
                {name:"康宝幼儿园",value:[113.091896,36.213734,20]},
                {name:"潞州宴",value:[113.123375,36.218933,30]},
                {name:"紫金房豆捞",value:[113.097880,36.200115,40]},
                {name:"南街新华书店",value:[113.103539,36.181983,50]},
                {name:"八一广场西口",value:[113.113045,36.203480,60]},
                {name:"309张公庄路口",value:[113.070768,36.191907,70]},
                {name:"黄碾",value:[113.118933,36.363802,80]},
                {name:"金威名店十字路口",value:[113.104126,36.182400,90]},
                {name:"长治市堠北庄镇张祖村民委员会",value:[113.033550,36.241394,100]},
                {name:"长北晋东南幼师",value:[113.115295,36.298479,110]},
                {name:"清华十字",value:[113.103274,36.156168,120]},
                {name:"惠丰西街",value:[113.114885,36.145822,130]},
                {name:"河头村路口",value:[113.137613,36.185348,140]},
                {name:"中潞冰河酒店",value:[113.121938,36.187258,150]},
                {name:"潞卓广场",value:[113.117810,36.213940,160]},
                {name:"妇幼保健院－孕产妇抢救中心",value:[113.199020,336.106064,170]},
                {name:"黄碾九天家具门口",value:[113.117152,36.363996,180]},
                {name:"凹里坡下",value:[113.083780,36.274985,190]},
                {name:"西南关小区",value:[113.091035,36.169083,200]}];

    var mapChart = echarts.init(document.getElementById('heatMap'));// 初始化echarts对象为mapChart

    /*
     * 读取echarts Option配置数据
     */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../../config/heat_map.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            mapOption = option;
            getMap();
        });
    }
     /*
      * 读取geo地图数据并注入echarts api
      */
    function getMap()
    {
        // 地图json文件的地址
        var mapUrl = "../../../mapData/map/json/shanxi/changzhi.json";
        // 读取geo地图数据
        $.get(mapUrl, function (json)
        {
            echarts.registerMap("chanzghi", json); // 注册地图
            mapOption.geo.map = "chanzghi"; // 设置geo坐标系地图名称
            mapOption.geo.zoom = 0; // 设置地图缩放等级
            mapOption.geo.center = [113.101211,36.218388];// 设置地图中心点
            mapOption.legend.data = ["图例"];//图例data设置
            mapOption.legend.x = "middle";//图例x轴位置 左、中、右英文
            mapOption.legend.y = "bottom";//图例y轴位置 上、中、下英文
            /*
             * 系列一数据和图标设置
             */
            mapOption.series[0].type = "heatmap";//自定义图标类型，此处可以设置scatter、effectScatter。
            mapOption.series[0].data = data; // 设置业务数据

            mapChart.setOption(mapOption);// 把加工好的mapOption注入echarts api。
        });
    }
</script>
</html>